<template>
	<view class="box">
		<u-form size="medium" ref="addressForm" :model="obj"  label-width="100px">
			<u-form-item label="收货人" prop="consignee"><u-input placeholder="请输入收货人" v-model="obj.consignee"></u-input></u-form-item>

			<u-form-item label="联系电话" prop="iphone"><u-input placeholder="请输入联系号码" v-model="obj.iphone"></u-input></u-form-item>

			<u-form-item label="所在区域" prop="districtSelected">
				<uni-data-picker v-model="obj.districtSelected" :localdata="options" popup-title="请选择所在区域" @change="onchange" @nodeclick="onnodeclick"></uni-data-picker>
			</u-form-item>

			<u-form-item label="详细地址" prop="address"><u-input placeholder="请输入详细地址" v-model="obj.address"></u-input></u-form-item>

		
		</u-form>
		<view class="u-flex u-flex-items-center footer">
			<u-button size="small" shape="circle" @click="close">取消</u-button>
			<u-button class="u-m-l-60" type="primary" size="small" shape="circle" @click="saveData">确定</u-button>
		</view>
	</view>
</template>
<script>
// import {addressOrder} from '@/api/shop/order';
import {regionData, CodeToText, TextToCode} from 'element-china-area-data';

export default {
	name: 'orderAddress',
	data() {
		return {
			show: true,
			isLoading: false,
			obj: {
				id: this.order.id,
				address: this.order.address.split(',')[3],
				consignee: this.order.user_real_name,
				iphone: this.order.user_mobile,
				district: this.order.address
					.split(',')
					.slice(0, 3)
					.join(','),
				districtSelected: []
			},
			//address:this.order.address.split(',')[3],
			//district:'',
			//districtSelected: [],
			options: [],

			itemRules: {
				consignee: [
					{
						required: true,
						trigger: 'blur',
						message: '请输入收货人'
					}
				],
				iphone: [
					{
						required: true,
						trigger: 'blur',
						message: '请输入收货人号码'
					}
				],
				districtSelected: [
					{
						type: 'array',
						required: true,
						message: '请选择所在区域'
					}
				],
				address: [
					{
						required: true,
						trigger: 'blur',
						message: '请输入详细地址'
					}
				]
			}
		};
	},
	computed: {
		// address(){
		//   return '111';
		// }
	},
	watch: {
		order: {
			handler: function() {
				this.obj.id = this.order.id;
				this.obj.address = this.order.address;
				this.obj.consignee = this.order.user_real_name;
				this.obj.iphone = this.order.user_mobile;
				// //处理地址所在区域
				let _d = [];
				let _t;

				if (this.order.address.indexOf(',') > -1) {
					_t = this.order.address.split(',');
				} else {
					_t = o.district.split(' ');
				}
				//拼接所在区域选择数组
				_d[0] = TextToCode[_t[0]].code;
				_d[1] = TextToCode[_t[0]][_t[1]].code;
				_d[2] = TextToCode[_t[0]][_t[1]][_t[2]].code;

				this.districtSelected = _d;
	
			}
		}
	},
	props: {
		order: {
			type: Object,
			default: function() {
				return {};
			}
		}
	},
	created() {
		regionData.forEach(a => {
			a.text = a.label;
			if (a.children && a.children.length > 0) {
				a.children.forEach(b => {
					b.text = b.label;
					if (b.children && b.children.length > 0) {
						b.children.forEach(c => {
							c.text = c.label;
						});
					}
				});
			}
		});
		this.options = regionData;
		// 处理地址所在区域
		let _d = [];
		let _t;
		if (this.order.address.indexOf(',') > -1) {
			_t = this.order.address.split(',');
		} else {
			_t = o.district.split(' ');
		}
		//拼接所在区域选择数组
		_d[0] = TextToCode[_t[0]].code;
		_d[1] = TextToCode[_t[0]][_t[1]].code;
		_d[2] = TextToCode[_t[0]][_t[1]][_t[2]].code;
		this.obj.districtSelected = _d;
		this.$nextTick(() => {
			this.$refs.addressForm.setRules(this.itemRules);
		});
	},
	mounted() {},
	methods: {	
		//保存数据(修改发货地址)
		saveData() {
			this.$refs.addressForm.validate().then(res=>{
				let o = {...this.obj};
				this.isLoading = true;
				//重新封装地址
				o.address = this.obj.district + ',' + this.obj.address;
			 uni.$u.http.put('/shop/order/saveConsignee',o,{custom:{id:8}})
					.then(res => {
						this.isLoading = false;
						this.$emit('success');
					})
					.catch(e => {
						this.isLoading = false;
					});
			}).catch(err=>{
				
			})
			
		},
		onchange(e) {
			const value = e.detail.value;
			let s=''
			value.forEach(e => {
				s += e.text + ',';
			});
			s = s.substring(0, s.length - 1);
			this.obj.district=s

		},
		onnodeclick(e) {
			console.log(e)
		},
		close() {
			this.$emit('close', 'showAddress');
		}
	}
};
</script>

<style lang="scss" scoped>
.u-form-item {
	margin-bottom: 15px;
}

//选择商品
.proSelect {
	width: 100%;
	border: 1px solid #dcdfe6;
	//margin-bottom: 10px;

	.phead {
		background: #f4f6f8;
		font-weight: 700;
		display: flex;
		height: 40px;
		line-height: 40px;
		border-bottom: 1px solid #dcdfe6;

		.name {
			flex: 1;
			padding-left: 10px;
		}

		.count {
			width: 80px;
			text-align: center;
		}

		.status {
			width: 80px;
			text-align: center;
		}

		.action {
			width: 100px;
			text-align: center;
		}
	}

	ul {
		margin: 0;
		max-height: 210px;
		overflow-y: auto;

		li {
			display: flex;
			cursor: pointer;
			line-height: 40px;
			padding: 10px 0;
			font-size: 13px;
			border-bottom: 1px solid #dcdfe6;
			padding-left: 10px;

			&:last-child {
				border-bottom: none;
			}

			.pro {
				display: flex;
				flex: 1;

				.txt {
					display: flex;
					padding-left: 10px;
					flex: 1;
					line-height: 18px;
					align-items: center;

					.mark {
						color: #f56c6c;
						background: #f2f4f6;
						display: table;
						border-radius: 5px;
						padding: 0 3px;
						margin-right: 3px;
					}
				}
			}

			.count {
				width: 80px;
				text-align: center;
			}

			.status {
				width: 80px;
				text-align: center;

				&.done {
					color: #67c23a;
				}

				&.none {
					color: #f56c6c;
				}
			}

			.action {
				width: 100px;
				text-align: center;
			}
		}
	}
}

.box {
	width: 100%;
	/*padding: 60px;
  height: calc(100vh - 77px);
  overflow: scroll;*/
}
</style>
